import { useEffect, useState } from "react";
import styles from "./styles.module.less";
import { Progress, Tag } from "antd";
import {
  CheckCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';


const ProgressBox = ({ progressVal, version }) => {
  const [status, setStatus] = useState("active");

  useEffect(() => {
    if (progressVal >= 100) {
      setStatus(null);
    }
  }, [progressVal]);

  return (
    <div className={styles.progressBox}>
      <Progress percent={progressVal} status={status} strokeColor={{ from: '#108ee9', to: '#87d068' }} size={["100%", 15]} />
      <div style={{ marginTop: 10 }}>
        {progressVal >= 100 ? (
          <Tag icon={<CheckCircleOutlined />} color="success" bordered={false}>
            更新完成
          </Tag>
        ) : (
          <Tag icon={<SyncOutlined spin />} color="processing" bordered={false}>
            {`正在更新${version ? "v" + version : ""}...`}
          </Tag>
        )}
      </div>
    </div>
  )
}

export default ProgressBox;